<!--  -->
<template>
  <div class="container">
    <navbar
      class="de-navbar"
      :vaniconL="true"
      :noRight="true"
      :noLeft="false"
      :vaniconR="true"
      iconNameL="arrow-left"
      iconNameR="setting-o"
      @clickLeft="goBack"
      >申请医生阅片</navbar
    >
    <div style="height: 0.45rem"></div>
    <div class="content">
      <p class="title">请填写申请人的信息（必填）:</p>
      <van-form class="v-form" @submit="onSubmit">
        <van-field
          v-model="name"
          name="name"
          label="姓名"
          placeholder="请输入姓名"
          :rules="[{ required: true, message: '请输入姓名' }]"
        />
        <van-field
          name="sex"
          label="性别"
          :rules="[{ required: true, message: '请选择性别' }]"
        >
          <template #input>
            <van-radio-group v-model="sex" direction="horizontal">
              <van-radio name="0">男</van-radio>
              <van-radio name="1">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="age"
          name="age"
          type="number"
          maxlength="2"
          label="年龄"
          placeholder="请输入年龄"
          :rules="[{ required: true, message: '请输入年龄' }]"
        />
        <van-field
          v-model="phone"
          name="phone"
          label="手机"
          placeholder="请输入手机"
          :rules="[{ required: true, message: '请输入手机' }]"
        />
        <!-- <van-field
          readonly
          clickable
          name="area"
          :value="areavalue"
          label="地区选择"
          placeholder="点击选择省市区"
          @click="showArea = true"
        />
        <van-popup v-model="showArea" position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup> -->

        <p class="title2">阅片服务：医生远程影像阅片</p>
        <p class="title">病情描述:</p>

        <van-field
          name="allergy"
          label="是否有过敏史"
          :rules="[{ required: true, message: '请填写' }]"
        >
          <template #input>
            <van-radio-group v-model="allergy" direction="horizontal">
              <van-radio name="0">是</van-radio>
              <van-radio name="1">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          name="diseases"
          label="是否有重大病史和慢性病史"
          :rules="[{ required: true, message: '请填写' }]"
        >
          <template #input>
            <van-radio-group v-model="diseases" direction="horizontal">
              <van-radio name="0">是</van-radio>
              <van-radio name="1">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="message"
          name="message"
          rows="2"
          autosize
          label="病情"
          type="textarea"
          maxlength="1000"
          placeholder="请您先描述病情（例如发病时间，主要症状，其他病况等），以便医生了解病情，给出建议"
          show-word-limit
        />
        <p class="title" style="margin-top: 0.1rem">需要医生提供的帮助 :</p>
        <p class="title3">
          可向医生询问是否可去门诊就诊，如何控制病情，是否需要手术等问题
        </p>
        <van-field
          v-model="message2"
          name="message2"
          rows="2"
          autosize
          label="描述"
          type="textarea"
          maxlength="1000"
          show-word-limit
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import navbar from "@/components/navbar";
import { setOrder } from "@/api/doctor";
import { Toast } from "vant";
export default {
  name: "applyRead",
  data() {
    return {
      name: "",
      age: "",
      sex: "",
      phone: "",
      allergy: "",
      diseases: "",
      message: "",
      message2: "",
      doItems: "",
      usItems: "",
      areavalue: "",
      showArea: false,
      areaList: {},
    };
  },

  components: { navbar },

  computed: {},

  created() {
    console.log(this.$route);
    window.scroll(0, 0);
    this.doItems = this.$route.params.items || "";
    this.usItems = this.$route.params.usitems || "";
  },
  mounted() {},

  methods: {
    // 返回上一页
    goBack() {
      this.$router.replace({ path: "/doctorList" });
    },
    onSubmit(values) {
      console.log("submit", values);
      let { usItems, doItems } = this;
      let data = {
        dsId: usItems.dsId,
        doctorId: doItems.id,
        orderStatus: 1,
        advise: values.message,
        patientName: values.name,
        doctorName: doItems.realName,
        patientGender: values.sex,
        patientAge: values.age,
        phone: values.phone,
        allergicHistory: values.allergy,
        diseaseHistory: values.diseases,
        adviseHelp: values.message2,
      };
      setOrder(data).then((res) => {
        if (res.data.status == 200) {
          Toast.success("提交成功");
          setTimeout(() => {
            this.$router.replace({ path: "/detailList" });
          }, 1000);
        } else {
          Toast.fail(res.data.msg);
        }
      });
    },
    //
      onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
      this.showArea = false;
    },
  },
};
</script>
<style lang='scss' scoped>
@import "../../assets/css/utils";
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  padding-bottom: 0.2rem;
  & .content {
    width: 95%;
    margin: auto;
    margin-top: 0.15rem;
    background: #fff;
    border-radius: 0.1rem;
    box-shadow: 0px 0px 10px #cccccc;
    padding: 0.2rem 0 0.1rem 0;
    & .title {
      font-size: 0.16rem;
      font-weight: 600;
      text-align: left;
      text-indent: 0.15rem;
      margin-bottom: 0.1rem;
    }
    & .title2 {
      font-size: 0.14rem;
      text-align: left;
      text-indent: 0.15rem;
      margin: 0.15rem 0;
    }
    & .title3 {
      display: block;
      font-size: 0.12rem;
      color: #999;
      margin: 0 0.15rem;
      text-align: left;
      line-height: 0.2rem;
    }
  }
}
</style>